<!--
 * @Descripttion: 
 * @Author: zhanyi
 * @Date: 2021-09-26 16:17:38
 * @FilePath: \wczd-mobile\src\pages\component\imageUpload\imageUpload.vue
-->
<template>
  <div class="imageUpload">
    <div class="uploadImg">
      <imgUpload :headers='_headers' :remove='remove' :formData="formData" :max='_max' :mediaType='_mediaType' @imgDelete='_imgDelete' :action="fileInfo" :value="_imgUrlData" @uploadSuccess='_uploadSuccess'></imgUpload>
    </div>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'//获取token
import imgUpload from "@/components/htz-image-upload/htz-image-upload.vue";
export default {
  name: 'imageUpload',
  components: { imgUpload },
  props: {
    remove: {
      type: Boolean,
      default: true
    },
    imgUrlData: {
      type: Array,
      default: () => []
    },
    _mediaType: {
      type: String,
      default: 'image'
    },
    _max: {
      type: Number,
      default: 6
    },
    _type: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      formData: {
        fileSource: "LOCAL",
      },
      fileInfo: process.uniEnv.baseUrl + '/fileInfo',
      profile: process.uniEnv.baseUrl + '/profile',
      token: getToken(),
      imageUrlCallBack: [],
    }
  },
  computed: {
    _headers: function () {
      return {
        'Authorization': this.token ? 'Bearer ' + this.token : ''
      }
    },
    _imgUrlData () {
      return this.imageUrlCallBack?.map(item => {
        return process.uniEnv.baseUrl + '/profile' + item.url
      })
    }
  },
  mounted () {
    this.imageUrlCallBack = this.imgUrlData
  },
  watch: {
    imgUrlData () {
      this.imageUrlCallBack = this.imgUrlData
    }
  },
  methods: {
    _imgDelete (res) {
      this.imageUrlCallBack.splice(res.index, 1)
      this.$emit('imageUrlCallBack', this.imageUrlCallBack, this._type)
    },
    _uploadSuccess (res) {
      if (res.statusCode === 200 && res.errMsg === 'uploadFile:ok') {
        var _res = JSON.parse(res.data);
        let result = {
          contentType: _res.contentType,
          id: _res.id,
          name: _res.name,
          url: _res.url,
        }
        this.imageUrlCallBack.push(result)
        this.$emit('imageUrlCallBack', this.imageUrlCallBack, this._type)
      }
    }
  },
}
</script>

<style scoped lang="scss">
.imageUpload {
  .tips {
    color: #9f9f9f;
    font-size: 12px;
    padding-left: 10px;
    margin-bottom: 200upx;
  }
}
</style>
